<template>
  <div class="shop-fee-detail" v-loading="loading">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="店铺名称">
        <el-tag type="primary" size="large">{{ feeInfo.shopName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="费用类型">
        <el-tag :type="getFeeTypeTagType(feeInfo.feeType)">
          {{ feeInfo.feeTypeName }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="费用金额">
        <span class="money-text">¥{{ feeInfo.feeAmount.toFixed(2) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="费用日期">
        {{ feeInfo.feeDate }}
      </el-descriptions-item>
      <el-descriptions-item label="到期日期">
        {{ feeInfo.dueDate }}
      </el-descriptions-item>
      <el-descriptions-item label="支付日期">
        {{ feeInfo.paymentDate || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="支付状态">
        <el-tag :type="getPaymentStatusTagType(feeInfo.paymentStatus)">
          {{ feeInfo.paymentStatusName }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">
        {{ feeInfo.paymentMethod || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="收据号">
        {{ feeInfo.receiptNumber || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDateTime(feeInfo.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ formatDateTime(feeInfo.updateTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ feeInfo.remark || '无' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        v-if="feeInfo.paymentStatus === 0" 
        type="success" 
        @click="handlePayment"
      >
        <el-icon><Money /></el-icon>
        立即支付
      </el-button>
      <el-button 
        v-if="feeInfo.paymentStatus === 0" 
        type="warning" 
        @click="handleRemind"
      >
        <el-icon><Bell /></el-icon>
        发送催缴
      </el-button>
      <el-button type="primary" @click="handleEdit">
        <el-icon><Edit /></el-icon>
        编辑记录
      </el-button>
      <el-button type="info" @click="handleClose">
        <el-icon><Close /></el-icon>
        关闭
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Money, Bell, Edit, Close } from '@element-plus/icons-vue'
import { mockFeeRecordList } from '../mockData'
import type { ShopFeeRecordVO } from '../types'

// Props
interface Props {
  feeId: number
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  payment: [feeId: number]
  remind: [feeId: number]
  edit: [feeId: number]
  close: []
}>()

// 响应式数据
const loading = ref(false)
const feeInfo = ref<ShopFeeRecordVO>({} as ShopFeeRecordVO)

// 生命周期
onMounted(() => {
  loadFeeDetail()
})

// 方法
const loadFeeDetail = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const mockData = mockFeeRecordList()
    const fee = mockData.find(f => f.id === props.feeId)
    
    if (fee) {
      feeInfo.value = fee
    } else {
      ElMessage.error('费用记录不存在')
    }
  } catch (error) {
    ElMessage.error('加载费用详情失败')
    console.error('加载费用详情失败:', error)
  } finally {
    loading.value = false
  }
}

const handlePayment = () => {
  emit('payment', props.feeId)
}

const handleRemind = () => {
  emit('remind', props.feeId)
}

const handleEdit = () => {
  emit('edit', props.feeId)
}

const handleClose = () => {
  emit('close')
}

// 工具方法
const getFeeTypeTagType = (feeType: string) => {
  const typeMap = {
    'PROPERTY': 'primary',   // 物业费
    'WATER': 'info',         // 水费
    'ELECTRIC': 'warning',   // 电费
    'GAS': 'success',        // 燃气费
    'SANITATION': 'danger'   // 卫生费
  }
  return typeMap[feeType as keyof typeof typeMap] || 'info'
}

const getPaymentStatusTagType = (status: number) => {
  const typeMap = {
    0: 'danger',  // 未支付
    1: 'success', // 已支付
    2: 'warning'  // 逾期
  }
  return typeMap[status as keyof typeof typeMap] || 'info'
}

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.shop-fee-detail {
  padding: 20px;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.action-buttons .el-button {
  margin: 0 8px;
}

.money-text {
  color: #f56c6c;
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}
</style>
